import { SysConfig } from '@/interface/user';
import { App } from 'ant-design-vue';
import type { MessageInstance } from 'ant-design-vue/es/message/interface';
import type { ModalStaticFunctions } from 'ant-design-vue/es/modal/confirm';
import type { NotificationInstance } from 'ant-design-vue/es/notification/interface';
import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useGlobalStore = defineStore('global', () => {
  const message = ref<MessageInstance>();
  const notification = ref<NotificationInstance>();
  const modal = ref<Omit<ModalStaticFunctions, 'warn'>>();
  const darkMode = ref('0');//0关闭 1开启
  const dyTitleMode = ref('1');
  const logoMode = ref('1');
  const themeColor = ref('#3B82F6');
  const isMobile = ref(document.body.clientWidth <= 640);
  (() => {
    const staticFunction = App.useApp();
    message.value = staticFunction.message;
    modal.value = staticFunction.modal;
    notification.value = staticFunction.notification;
  })();

  const toggleDarkMode = (checked: string) => {
    darkMode.value = checked
    if (darkMode.value === '1') {
      document.getElementsByTagName('html')[0].classList.add('dark')
    } else {
      document.getElementsByTagName('html')[0].classList.remove('dark')
    }
  }

  const toggleDyTitleMode = (checked: string) => {
    dyTitleMode.value = checked
  }

  const toggleLogoMode = (checked: string) => {
    logoMode.value = checked
  }

  const captchaEnable = ref(false)

  const setSysConfig = (config: SysConfig) => {
    darkMode.value = config.darkMode as string;
    if (darkMode.value === '1') {
      document.getElementsByTagName('html')[0].classList.add('dark')
    } else {
      document.getElementsByTagName('html')[0].classList.remove('dark')
    }
    dyTitleMode.value = config.dyTitleMode as string;
    logoMode.value = config.logoMode as string;
    themeColor.value = config.themeColor as string;
  }

  const resetSysConfig = () => {
    darkMode.value = '0';
    dyTitleMode.value = '1';
    logoMode.value = '1';
    themeColor.value = '#3B82F6';
    document.getElementsByTagName('html')[0].classList.remove('dark')
  }

  return {
    message, notification, modal, captchaEnable, darkMode, toggleDarkMode,
    dyTitleMode, toggleDyTitleMode, logoMode, toggleLogoMode, themeColor, setSysConfig,
    resetSysConfig, isMobile
  };
});